<template>
  <div class="mess_box">
    <my-scroll>
      <div class="box">
        <el-input
          v-model="content"
          type="textarea"
          placeholder="请输入文字"
          style="width:300px"
        ></el-input>
        <el-button
          class="fabutton"
          type="primary"
          icon="el-icon-position"
          @click="release"
          >发布</el-button
        >
        <el-input
          class="searchInput"
          placeholder="输入昵称后即可查找相关留言"
          maxlength="10"
          show-word-limit
          prefix-icon="el-icon-search"
          v-model="serachName"
          clearable
        ></el-input>
        <el-button type="primary" icon="el-icon-search" @click="serachmessage"
          >查找</el-button
        >
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column
            prop="date"
            label="日期"
            width="200px"
          ></el-table-column>
          <el-table-column
            prop="name"
            label="昵称"
            width="150px"
          ></el-table-column>
          <el-table-column prop="content" label="内容"></el-table-column>
          <el-table-column label="操作" width="100px">
            <template slot-scope="scope">
              <el-button type="text" size="small">查看</el-button>
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="page">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            layout="total ,prev, pager, next ,jumper"
            :page-size="pagesize"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </my-scroll>
  </div>
</template>
<script>
import request from "../../api/request"
export default {
  data() {
    return {
      pagesize: 10,
      total: 0,
      content: "",
      currentPage: 1,
      tableData: [],
      serachName: "",
    }
  },
  created() {
    this.getMessage({ page: this.currentPage, limit: this.pagesize })
  },
  methods: {
    handleClick(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await request({
            url: "/message/remove",
            data: { _id: row._id },
            method: "post",
          })
          if (res.status) {
            this.$notify({
              title: "成功",
              message: res.msg,
              type: "success",
            })
            this.getMessage({ page: this.currentPage, limit: this.pagesize })
          } else {
            this.$notify.error({
              title: "错误",
              message: res.msg,
            })
          }
        })
        .catch(() => {
          this.$notify.info({
            title: "消息",
            message: "已取消删除操作",
          })
        })
    },
    // 当页码改变时
    handleCurrentChange(val) {
      this.currentPage = val
      this.getMessage({
        name: this.serachName,
        page: this.currentPage,
        limit: this.pagesize,
      })
    },
    // 获取留言
    async getMessage(args) {
      let res = await request({
        url: "/message/obtain",
        data: args,
        method: "get",
      })
      this.tableData = []
      const { data, status, msg, count } = res
      if (status) {
        this.tableData = Object.freeze(data)
        this.total = Object.freeze(count)
      }
    },
    // 回复留言
    release() {
      request({
        name: "博主",
        content: this.content,
        isAdmin: true,
      }).then((res) => {})
      if (res.status) {
        this.getMessage({ page: 1, limit: this.pagesize })
        this.content = ""
        this.$notify({
          title: "成功",
          message: res.msg,
          type: "success",
        })
      } else {
        this.$notify.error({
          title: "错误",
          message: res.msg,
        })
      }
    },
    serachmessage() {
      this.getMessage({ name: this.serachName, page: 1, limit: this.pagesize })
    },
  },
}
</script>
<style lang="scss" scoped>
.mess_box {
  height: 100%;
  width: 100%;
}
.box {
  padding: 20px;
}
.el-textarea {
  display: inline-block;
  margin-right: 20px;
  margin-bottom: 20px;
}
.fabutton {
  display: inline-block;
  margin-right: 20px;
  margin-bottom: 20px;
}
.page {
  margin: 10px 0px;
  text-align: right;
}
.searchInput {
  width: 270px;
  margin-right: 20px;
}
</style>
